<template>
  <div>
      <input type="text" v-model="num"><br>
      <button @click='addCount(num)'>点击count+</button>
      <!-- num是绑定的input里面的值 -->
      <button @click='asyncAddcount(num)'>延迟添加666</button>
      {{$store.state.count}}
      {{ filterList}}
      {{ addrDetail}}
  </div>
</template>

<script>
import {mapMutations,mapActions,mapGetters} from "vuex"
export default {
    data(){return{num:0}},
    // 通过mutations修改state内的数据，并形成数据快照，必须是同步
    // 1. 创建store
    // 2.main.js state:{count:0}
    // 3.App.vue 调用 {{$store.state.count}}
    // 4.将函数封装在mutations内部  strict:true   mutations:{addCount(state){state.count++}}
    // 5.App.vue 调用 <button @click="$store.commit('addCount')">点击count+</button>
    // 6.vue工具查看 有迹可循
    // 7.传参
    // 8.自定义传的参数 新增input 绑定v-model="num"
    // 9.data里面声明num
    // 10.将666修改为num
    // 11.用户输入一定是字符串 data前面+Number
    // 12.封装 传递参数
    // 13.mapMutations的使用 引入+ 采用数组形式引入mapMutations+利用拓展运算符将导出的状态映射给methods
    methods:{
        // addCount(data){
        //     this.$store.commit('addCount',data)
        // }
        ...mapMutations(['addCount']),
        // asyncAddcount(data){
        //     this.$store.dispatch('asyncAddcount',data)
        // }
        ...mapActions(['asyncAddcount'])

    },
    // 14.action的使用 内部封装方法 dispatch调用
    // 15.action传参 
    // 16.getters的使用
    // 1. state内部定义数组
    // 2.getters 自定义函数 默认的store filter方法返回
    // 3.调用 链式方法 
    // 17.getters的另一种用法 获取state内部对象包对象包对象的数据 
    // 1.封装函数在getters内部 
    // 2.state内部声明数据 
    // 3.通过{{$store.getters. addrDetail}}调用 显示在浏览器中
    // 18. computed 和methods 
    // 1.computed 作为属性使用
    // 2.methods 点击调用函数
    // 3.调用 filterList addrDetail
    computed:{
        // filterList(){
        //     return this.$store.getters.filterList
        // },
        // addrDetail(){
        //     return this.$store.getters.addrDetail
        // }
        ...mapGetters(['filterList','addrDetail'])
    }
}
</script>

<style>

</style>